<template>
  <view
    class="uni-dialog uni-mask box box-center"
    @touchmove.stop.prevent
    v-if="value"
  >
    <view class="content relative bcl-white radius uni-animation-slide-up">
      <!-- 内容 -->
      <slot name="content"></slot>

      <!-- 关闭按钮 -->
      <view
        class="icon icon-close pointer"
        @tap="hideDialog"
        v-if="showClose"
      ></view>

      <!-- 选择按钮 -->
      <view class="btns box mt-20" v-if="showBtn">
        <button
          class="uni-button uni-button-full uni-button-disalbed mr-20"
          @tap="cancel"
        >
          {{ cancelBtnText }}
        </button>
        <button class="uni-button uni-button-full" @tap="submit">
          {{ confirmBtnText }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "uniDialog",

  model: {
    prop: "value",
    event: "input"
  },

  props: {
    value: {
      type: Boolean,
      default: false
    },

    showClose: {
      type: Boolean,
      default: true
    },

    showBtn: {
      type: Boolean,
      default: true
    },

    confirmBtnText: {
      type: String,
      default: "确定"
    },

    cancelBtnText: {
      type: String,
      default: "取消"
    },

    sync: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    submit() {
      this.$emit("submit");
    },

    cancel() {
      this.$emit("cancel");
      !this.sync && this.$emit("input", false);
    },

    hideDialog() {
      this.$emit("input", false);
    }
  }
};
</script>

<style lang="scss" scoped>
.uni-dialog {
  .content {
    width: 80%;
    padding: 100upx 20upx 20upx 20upx;
    overflow: hidden;

    button {
      padding: 20upx 30upx;
    }

    .icon-close {
      position: absolute;
      top: 0;
      right: 0;
      padding: 25upx;
    }
  }
}
</style>
